import React from 'react';
import './App.css';
import HomeContainer from './component/Home/HomeContainer';
import MovieContainer from './component/Movie/MovieContainer';
import AboutContainer from './component/About/AboutContainer';
//安装react-router-dom
import {HashRouter, Route, Link, Redirect} from 'react-router-dom';
//配置fetch—jsonp 跨域请求
import fetchJSONP from 'fetch-jsonp';
import { Layout, Menu} from 'antd';
//挂载beseUrl
React.Component.prototype.baseURL = 'http://39.97.33.178/api/';
React.Component.prototype.$http = fetchJSONP;

const { Header, Content, Footer } = Layout;


function App() {
  return (
    <div className="App">
     <HashRouter>
         <Layout>
    <Header className="header">
  <div className="logo">hairuil</div>
      {/* 头部区域 */}
      <Menu
        theme="dark"
        mode="horizontal"
        defaultSelectedKeys={[window.location.hash.split('/')[1]||'home']}
        style={{ lineHeight: '64px' }}
      >
        <Menu.Item key="home"><Link to="/home">首页</Link></Menu.Item>
        <Menu.Item key="movie"><Link to='/movie'>电影</Link></Menu.Item>
        <Menu.Item key="about"><Link to='/about'>关于</Link></Menu.Item>
      </Menu>
    </Header>
    <Content style={{ padding: '0 20px' }}>
      <Layout className="site-layout-background">
        {/* 中间区域 */}
        <Content style={{ minHeight: 280 }}>
          {/* 显示对应放映的组件 */}
          <Route exact path='/' render={()=><Redirect to='/home'/>}></Route>
          <Route path="/home" component={HomeContainer}></Route>
          <Route path="/movie" component={MovieContainer}></Route>
          <Route path="/about" component={AboutContainer}></Route>
        </Content>
      </Layout>
    </Content>
    {/* 底部区域 */}
  <Footer style={{ textAlign: 'center' }}>Ant Design ©{new Date().getFullYear()} Created by Hairuil</Footer>
  </Layout>
     </HashRouter>
     

    </div>
  );
}

export default App;
